<template>
  <div class="">
    <p-modal
      title="新增子班组"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item ref="parentId" label="父层级" prop="parentId">
          <p-tree-select v-if="state == 'add'"
            v-model="form.parentId"
            tree-data-simple-mode
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="Please select"
            :load-data="onLoadData"
          />

         <p-input
            v-if="state == 'edit'"
            disabled
            v-model="parentName"
          />          

        </p-form-model-item>        
        <p-form-model-item ref="classno" label="班组编码" prop="classno">
          <p-input
            :disabled = "state == 'edit'"
            v-model="form.classno"
          />
        </p-form-model-item>        
        <p-form-model-item ref="classname" label="班组名称" prop="classname">
          <p-input
            v-model="form.classname"
          />
        </p-form-model-item>

        <p-form-model-item ref="classdescription" label="班组描述" prop="classdescription">
          <p-input
            v-model="form.classdescription"
          />
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";


export default {
  data() {
    return {

      treeData: [
        {
          id: '-1',
          pId: '-2',
          value: '-1',
          title: '根节点',
          isLeaf: false
        }
      ],

      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 12
      },
      visible: false,
      confirmLoading: false,
      form: {
        classno: '',
        parentId: '',
        classname: '',
        classdescription: ''
      },  
      parentName: '',    
      rules: {
        parentId: [
          { required: true, message: '请输选择父班组', trigger: 'blur' },
        ],
        classno: [
          { required: true, message: '请输入班组编码', trigger: 'blur' },
        ],        
        classname: [
          { required: true, message: '请输入班组名称', trigger: 'blur' },
        ],
        classdescription: [
          { required: true, message: '请输入班组描述', trigger: 'blur' },
        ],
      },
      url: {
        add: '/mes-manpower/mesHrClassInfo',
        childList: '/mes-manpower/mesHrClassInfo/childList', // 获取子节点
        detail: '/mes-manpower/mesHrClassInfo', // 根据id获取班组信息
        edit: '/mes-manpower/mesHrClassInfo', // 编辑
      },
      state: 'add'
    };
  },

  mounted() {},
  methods: {

    showModal(record) {
      this.visible = true;

      if (record) {
        this.state = 'edit'
        this.form.classno = record.classno
        this.form.classname = record.classname
        this.form.classdescription = record.classdescription  
        this.form.parentId = record.parentId  
        this.form.id = record.id  
        getAction(this.url.detail + '/' + record.parentId).then(res => {
          if(res.success) {
            this.parentName = res.data.classname
          }
        })      
      } else {
        this.state = 'add'
      }

    },
    handleOk(e) {
      this.confirmLoading = true;

      this.$refs.ruleForm.validate(valid => {
        if (valid) {

          console.log(this.state );
          

          if(this.state == 'add' ) {
            postAction(this.url.add, this.form).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })

          }

          if( this.state == 'edit' ){
            putAction(this.url.edit, this.form).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })
          }

        } else {
          this.confirmLoading = false;

          return false;
        }
      });


    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },

    // // 获取父层级
    // getTreeData(){
    //     const params = {
    //       parentId: '-1'
    //     }      
    //     getAction(this.url.childList, params).then( res => {
    //       if(res.success) {
    //         const arr = this.transformData(res.data)
    //         this.treeData = this.treeData.concat(arr)
    //         resolve();
    //       }
    //     } )      
    // },

    // 处理数据符合树结构
    transformData(data){
      return data.map( ele => ({
        id: ele.id,
        pId: ele.parentId,
        value: ele.id,
        title: ele.classname,
        isLeaf: ele.hasChild == 0,
      }) )
    },

    // 父层级获取子节点
    onLoadData(treeNode) {
      return new Promise(resolve => {
        const params = {
          parentId: treeNode.dataRef.id
        }
        getAction(this.url.childList, params).then( res => {
          if(res.success) {
            const arr = this.transformData(res.data)
            this.treeData = this.treeData.concat(arr)
            resolve();
          }
        } )
      });
    },

  },
  components: {},
};
</script>

<style lang="less" scoped>
</style>
